<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>requestAnimationFrame</title>
</head>
<body>
  <div id="time"></div>
  <script>
    function setNum(num) {
      if(num < 10) {
        return num = `0${num}`
      }
      return num
    }
    let dom = document.querySelector('#time');
    //第 1 种写法
    // (function getDateTime() {
    //   let currentDate = new Date()
    //   let [year, month, date, hour, minute, second] = [
    //     currentDate.getFullYear(),
    //     currentDate.getMonth() + 1,
    //     currentDate.getDate(),
    //     currentDate.getHours(),
    //     currentDate.getMinutes(),
    //     currentDate.getSeconds()
    //   ]
    //   let dateStr = `当前时间：${year}-${month}-${date} ${hour}:${minute}:${second}`
    //   dom.innerHTML = dateStr
    //   window.requestAnimationFrame(getDateTime)
    // })()
    // 第 2 种写法
    function getDateTime() {
      let currentDate = new Date()
      let [year, month, date, hour, minute, second] = [
        currentDate.getFullYear(),
        setNum(currentDate.getMonth() + 1),
        setNum(currentDate.getDate()),
        setNum(currentDate.getHours()),
        setNum(currentDate.getMinutes()),
        setNum(currentDate.getSeconds())
      ]
      let dateStr = `当前时间：${year}-${month}-${date} ${hour}:${minute}:${second}`
      dom.innerHTML = dateStr
      window.requestAnimationFrame(getDateTime)
    }
    window.requestAnimationFrame(getDateTime)
  </script>
</body>
</html>